<template>
  <div class="gl_contentBox gl_heightFull">
    <el-row class="gl_mb_10">
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="clickAdd()">添加轮播</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="tableLoading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;">
      <el-table-column label="序号" type="index" />
      <el-table-column label="图片" width="350">
        <template slot-scope="{ row }">
          <div class="gl_clear gl_my_5">
            <div class="gl_mr_10 gl_fl" style="height:60px">
              <img class="table_photo" :src="getStaticFileUrl(row.imageUrl)">
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="linkAddress" label="链接地址" />
      <el-table-column prop="creatorName" label="创建人" />
      <!-- 创建时间 -->
      <el-table-column label="创建时间">
        <template slot-scope="{row}">
          <span v-if="row.creationTime">
            {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" width="180">
        <template slot-scope="{row, $index}">
          <el-button size="mini" type="text" @click="clickEdit(row)">编辑</el-button>
          <el-button v-if="selectedMsg.IsOnline" size="mini" type="text" @click="clickOnline(row, false)">下架</el-button>
          <template v-else>
            <el-button size="mini" type="text" @click="clickOnline(row, true)">上架</el-button>
            <el-button size="mini" type="text" style="color:#FF3434" @click="clickDelete(row)">删除</el-button>
          </template>
          <template>
            <i class="preview_bottom el-icon-bottom gl_ml_10 gl_mr_10" :class="$index !== tableData.length - 1 ? '' : 'disable_move'" @click="setSortOrder(row, $index, 'down')" />
            <i class="preview_top el-icon-top gl_mr_10 " :class="$index !== 0 ? '' : 'disable_move'" @click="setSortOrder(row, $index, 'up')" />
          </template>
        </template>
      </el-table-column>
    </el-table>
    <add-carousel ref="addCarousel" />
  </div>
</template>

<script>
import { deepCopy } from '@/lib';
import addCarousel from './addCarousel';
import {
  Api_GET_MallBannerQO, // 获取轮播图列表
  Api_PUT_MallBannerIdOnlineQO, // 上下架
  Api_PUT_MallBannerIdSortOrderQO
} from '@/lib/form/shoppingmall/swaggerForm';
import {
  api_GET_MallStoreCurrent,
  api_GET_MallBanner, // 获取轮播图列表
  api_PUT_MallBannerIdOnline, // 上下架
  api_PUT_MallBannerIdSortOrder,
  api_DELETE_MallBannerId // 删除轮播
} from '@/extend/api/shoppingmallswaggerApi/app.js';
export default {
  components: { addCarousel },
  props: {
    activeTab: {
      type: String,
      default() {
        return 'onDisplay';
      }
    }
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
      storeId: '',
      selectedMsg: new Api_GET_MallBannerQO(),
      Api_PUT_MallBannerIdOnlineQO: new Api_PUT_MallBannerIdOnlineQO(),
      Api_PUT_MallBannerIdSortOrderQO: new Api_PUT_MallBannerIdSortOrderQO()
    };
  },
  watch: {
    'storeId': {
      handler: function(val) {
        if (!val) {
          return;
        } else {
          this.selectedMsg.StoreId = val;
          this.selectedMsg.IsOnline = this.activeTab === 'onDisplay';
          this.getPageList();
        }
      }
    },
    'activeTab': {
      handler: function(val) {
        this.selectedMsg.IsOnline = val === 'onDisplay';
        this.getPageList();
      }
    }
  },
  mounted() {
    this.api_GET_MallStoreCurrent();
  },
  methods: {
    // 获取当前用户店铺信息
    api_GET_MallStoreCurrent() {
      api_GET_MallStoreCurrent({ IncludeStatus: true }).then(res => {
        this.storeId = res.id || '';
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取轮播列表
    getPageList() {
      this.tableLoading = true;
      if (!this.selectedMsg.StoreId) return;
      api_GET_MallBanner(this.selectedMsg).then(res => {
        this.tableLoading = false;
        this.tableData = res;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 添加轮播
    clickAdd() {
      this.$refs.addCarousel.storeId = this.storeId;
      this.$refs.addCarousel.isEdit = false;
      this.$refs.addCarousel.dialogVisible = true;
    },
    // 上下架
    clickOnline(row, isOnline) {
      const that = this;
      this.Api_PUT_MallBannerIdOnlineQO.isOnline = isOnline;
      that.tableLoading = true;
      api_PUT_MallBannerIdOnline(row.id, this.Api_PUT_MallBannerIdOnlineQO).then(res => {
        that.tableLoading = false;
        if (res) {
          const msg = isOnline ? '上架成功' : '下架成功';
          this.$message({ type: 'success', message: msg });
          this.getPageList();
        }
      }, error => {
        that.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clickEdit(row) {
      this.$refs.addCarousel.storeId = this.storeId;
      this.$refs.addCarousel.isEdit = true;
      this.$refs.addCarousel.selectedMsg = deepCopy(row);
      this.$refs.addCarousel.dialogVisible = true;
    },
    clickDelete(row) {
      const that = this;
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.tableLoading = true;
        api_DELETE_MallBannerId(row.id).then(res => {
          that.tableLoading = false;
          this.getPageList();
          this.$message({ type: 'success', message: '删除成功!' });
        }, error => {
          that.tableLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      }).catch(() => {
      });
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 更新商品排序
    setSortOrder(row, index, type) {
      this.tableLoading = true;
      api_PUT_MallBannerIdSortOrder(row.id, { offset: type === 'up' ? 1 : -1 }).then(res => {
        this.tableLoading = false;
        if (res) {
          this.getPageList();
        }
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.tableLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.table_photo {
  width: 180px;
  height: 60px;
  border-radius: 6px;
}
.preview_close,
.preview_top,
.preview_bottom {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  color: rgba(0,0,0,0.65);;
}

.preview_close:hover,
.preview_top:hover,
.preview_bottom:hover {
  color: #5CBDFF;
}
.disable_move {
  color: #C0C4CC;
  cursor: not-allowed;
}
  .roodsPhoto{
    width: 60;
    height: 60;
    vertical-align: middle;
  }
  .roodsBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
</style>
